<!-- 
	版本声明：
	* 由于 WanlLive、WanlChat、WanlPay 以下代码开发难度较大，已将相关代码独立申请著作权，受法律保护！！！
	* 无论你购买任何版本，均不允许复制到第三方直接、间接使用，且也不能以学习为目的参考和借鉴！！
	* 你仅有在 WanlShop 中使用、二次开发权利，否则我们会追究法律责任 
	* 深圳前海万联科技有限公司 @www.i36k.com
	* 法律顾问：易法通 @http://www.yifatong.com/
-->
<template>
	<view class="video">
		
		<view class="empty position-center align-center justify-center" v-if="videoList.length === 0 && status !== 'loading'">
			<view>
				
			</view>
		</view>
		<swiper 
			vertical
			acceleration
			:current="videoIndex" 
			:style="{width: width + 'px', height: height + 'px'}"
			@change="changeCurrent"
			@animationfinish="animationFinish"
			>
			<swiper-item v-for="(item, index) in videoList" :key="index">
				<!-- 视频预渲染 +1 -->
				<block v-if="Math.abs(videoIndex - index) <= 1">
				<!-- <block v-if="videoIndex === index"> -->
					<view >
						<!-- 播放界面 -->
						<wanl-movie-video 
							ref="wanlVideo"
							:width="width" 
							:height="height"
							:src="item.video.url"
							:play="item.play"
							:videoId="item.id"
							:coverUrl="item.video.cover_url"
							:objectFit="item.video.fit"
							:gDuration="item.video.duration" 
							:initialTime="item.initialTime"
							:isLock="item.is_lock"
							:item="item"
							@pause="pauseVideo"
							@getBuy="showBuy"
							
						/> 
						<!-- 组件 -->
						<view class="goBack" @tap="goback">
							<image class="goBackimg" src="https://dcdn.cxycoder.com/user/back.png" mode="aspectFill"></image>
						</view>
						<view class="position-bottom-center" style="bottom: 0rpx;height: 1200rpx;" @click="handleClicked">
							<view class="flex justify-end align-end padding-lr-bj padding-bottom-sm" style="margin-top: 300rpx;">
								<view class=" main-right align-center">
									<view v-if="item.user" class="main-right-user position-relative margin-bottom-xs align-center">
										<view class="main-right-image justify-center bg-white round align-center" @click.stop="handleUser(item.user_no, $event)">
											<image class="main-right-img round" :src="oss(item.user.avatar, 35, 35, 2, 'avatar')"/>
										</view>
										<view v-if="item.isFollow === 0" class="main-right-user-follow bg-red round position-absolute justify-center align-center" @click.stop="handleFollow()">
											<text class="text-min icon">&#xe644;</text>
										</view>
									</view>
									<view class="flex margin-top align-center" style="flex-direction: column;" @click.stop="handleLike">
										<text :class="{'text-red': item.is_favorite == 1}" class="icon text-xxxxl ">&#xe635;</text>
										<text class="text-white text-min">{{item.count}}</text>
									</view>
									<view class="flex margin-top align-center" style="flex-direction: column;" @click.stop="handleShare">
										<text class="icon text-xxxxl">&#xe72f;</text>
									</view>
								</view>
							</view>
						</view>
						<!-- 视频介绍 -->
						<view class="jieshao" @click.stop="handleJishu">
							<view class="margin-top-xs flex">
								<view><text class="text-xxl text-white text-bold">{{item.short.name}}</text><text class="text-lg text-white margin-top-xs">第{{videoIndex+1}}集 (共 {{total}} 集)</text></view>
								<view><text class="margin-top-xs text-sm text-red">查看更多剧情..</text></view>
							</view>
						</view>
					</view>
				</block>
			</swiper-item>
		</swiper>
		<!-- 弹出层 -->
		<uni-popup ref="wanlSharePopup" type="bottom">
			<view class="share bg-white padding-bj">  
				<view class="flex-direction justify-between align-center margin-bottom-bj">
					<text></text>
					<text class="text-black text-30">分享到</text>
					<text class="icon text-30 text-black" @tap="handleShareClose">&#xe66b;</text>
				</view>
				<scroll-view class="share-scroll-view flex-direction" scroll-x :show-scrollbar="false" scroll-with-animation>
					<!-- #ifdef MP -->
					<view class="share-scroll-view-item">
						<button class="share-scroll-view-item-button" open-type="share">
							<view class="share-scroll-view-item-button-icon justify-center align-center bg-green">
								<text class="icon text-xxl text-white">&#xe608;</text>
							</view>
							<view class="margin-top-xs">
								<text class="text-sm text-black">分享</text>
							</view>
						</button>
					</view>
					<!-- #endif -->
					<view class="share-scroll-view-item" v-for="(item, index) in providerList" :key="index" v-if="item">
						<button class="share-scroll-view-item-button" @tap="handleOnShare(item)">
							<view class="share-scroll-view-item-button-icon justify-center align-center" :class="item.background">
								<text v-if="item.id === 'weixin'" class="icon text-xxl text-white">&#xe608;</text>
								<text v-if="item.id === 'sinaweibo'" class="icon text-xxl text-white">&#xe6b6;</text>
								<text v-if="item.id === 'qq'" class="icon text-xxl text-white">&#xe60b;</text>
								<!-- <text v-if="item.id === 'poster'" class="icon text-xxl text-black">&#xe6c8;</text> -->
								<text v-if="item.id === 'link'" class="icon text-xxl text-black">&#xe63b;</text>
								<text v-if="item.id === 'report'" class="icon text-xxl text-black">&#xe652;</text>
							</view>
							<view class="margin-top-xs">
								<text class="text-sm text-black">{{ item.name }}</text>
							</view>
						</button>
					</view>
				</scroll-view>
				<view :style="{height: `${bottom}px`}" /> 
			</view>  
		</uni-popup>
		<!-- 集数弹出层 -->
		<uni-popup ref="wanlJishuPopup" type="bottom">
			<!-- 修复剧集弹出层高度 -->
			<view class="jishu"
			:style="{height: `${jishuHeight}px`}"
			>  
				<view class="flex-direction justify-between align-center margin-bottom-bj">
					<text class="text-black text-32 text-bold8">{{videoInfo.name}} (共 {{total}} 集)</text>
				</view>
				
				<scroll-view class="jishubox" scroll-y="true">
					<view class="scorllBox">
						<view class="jishuitem" v-for="(item,index) in videoList" :key="index" @tap="clickVideo(index)">
							<image class="jishuitemimage" :src="item.short.cover_url" mode="aspectFill"></image>
							<view class="jishuitemnum text-center"><text class="wanl-btn-tag-text">第{{index+1}}集</text></view>
							<view class="jishuitemlock" v-if="item.is_lock">
								<image  class="jishuitemlockimg" src="https://dcdn.cxycoder.com/img/movielock.png" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</scroll-view>
		
			</view>  
		</uni-popup>
		<!-- 购买集数 -->
		<uni-popup ref="wanlJifenPopup" type="bottom">
			<view class="buy">  
				<view class="flex-direction justify-between align-center margin-bottom-bj">
					<text class="text-black text-32 text-bold8">支持作者创作，解锁后继续观看</text>
				</view>
				<view class="buytips">
					<view class="buytipsleft flex-direction"><text>解锁本集：</text><text class="buytipslefttext">{{videoList[0].short.pay_score}}积分</text></view>
					<view class="buytipsright flex-direction"><text>账户余额：</text><text class="buytipsrighttext" v-if="user.isLogin">{{myscore}}积分</text><text v-else @tap="$wanlshop.to('/pages/user/auth/auth')">未登录</text></view>
				</view>
				<view class="chongzhi flex-direction">
					<view class="chongzhiitem position-relative" v-for="item in buyList" :key="item.id" @tap="buyScore(item.id,item.reward_points,item.recharge_amount)">
						<image class="position-absolute chongzhiitemimg" src="https://dcdn.cxycoder.com/img/chongzhijifen.png" mode="aspectFill"></image>
						<view class="chongzhiitemTips"><text class="chongzhiitemTipstext">{{item.tag}}</text></view>
						<view class="chongzhibox">
							<view class="flex-direction align-center"><text class="chongzhiprice">{{item.recharge_amount}}</text><text class="unit">元</text></view>
							<view><text class="chongzhipoint">{{item.reward_points}}积分</text></view>
						</view>
					</view>
					<view class="huiyuan" @tap="toMember">
						<image class="position-absolute chongzhiitemimg" src="https://dcdn.cxycoder.com/img/chongzhihuiyuan.png" mode="aspectFill"></image>
						<view><text class="huiyuantitle">开通会员</text></view>
						<view><text class="huiyuanpoint">全站短剧免费看</text></view>
					</view>
				</view>
				<view><text class="tishi">虚拟商品购买后不可退还，青少年请在家长陪同下充值，一经购买，不予退换</text></view>
				<view><text class="tishi2">遇到问题可在“我的”页面联系客服</text></view>
				<view class="wanlian cu-bar flex flex-direction wanl-bg-orange buybtn align-center justify-center" @tap="buy"><text class="buybtntext">兑换本集</text></view>
			</view>  
		</uni-popup>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import wanlMovieVideo from '@/components/wanl-movie/video';
	// #ifdef H5
	import jssdk from '@/common/libs/jssdk';
	// #endif
	let timer = null
	export default {
		name: "wanlMoviePlay",
		components: {
			wanlMovieVideo
		},
		computed: {
			...mapState(['user'])
		},
		props: {
			find_id: {
				type: String,
				default: ''
			},
			isComment: {
				type: String,
				default: 'N'
			},
			juid: {
				type: Number,
				default: 0
			},
			shortChildId: {
				type: Number,
				default: 0
			},
			height: {
				type: Number,
				default: 0
			},
			width: {
				type: Number,
				default: 0
			},
			bottom: {
				type: Number,
				default: 0
			},
			safeBottom: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				preload: 2, //当前页剩余个数换页
				clickNum: 0, //记录点击次数
				videoList: [],
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'loading',
				videoIndex: 0,
				oldVideoIndex: 0,
				commentData: {},
				providerList: [],
				videoInfo:{},
				buyList:[],
				myscore:'',
				total:0,
				short:{
					name:''
				},
				jishuHeight: 400,
			};
		},
		mounted() {
			
			this.jishuHeight = parseInt(uni.getSystemInfoSync().windowHeight * 0.7);
			
			//获取套餐列表
			this.getBuyList();
			
			this.loadData();
			// 分享
			uni.getProvider({
				service: 'share',
				success: e => {
					let data = [];
					// #ifdef APP-PLUS
					for (let i = 0; i < e.provider.length; i++) {
						switch (e.provider[i]) {
							case 'weixin':
								data.push(
									{
										name: '微信好友',
										id: 'weixin',
										background: 'bg-green',
										sort: 0
									},
									{
										name: '微信朋友圈',
										id: 'weixin',
										background: 'bg-green',
										type: 'WXSenceTimeline',
										sort: 1
									}
								);
								break;
							case 'sinaweibo':
								data.push({
									name: '新浪微博',
									id: 'sinaweibo',
									background: 'bg-red',
									sort: 2
								});
								break;
							case 'qq':
								data.push({
									name: 'QQ',
									id: 'qq',
									background: 'bg-blue',
									sort: 3
								});
								break;
							default:
								break;
						}
					}
					// #endif
					data.push(
						// {
						// 	name: '生成海报',
						// 	id: 'poster',
						// 	background: 'bg-gray',
						// 	sort: 4
						// },
						{
							name: '链接',
							id: 'link',
							background: 'bg-gray',
							sort: 5
						}
					);
					if(this.isReport){
						data.push(
							{
								name: '举报',
								id: 'report',
								background: 'bg-gray',
								sort: 6
							}
						);
					}
					this.providerList = data.sort((x, y) => {
						return x.sort - y.sort;
					});
				},
				fail: e => {
					uni.showModal({
						content: '获取分享通道失败',
						showCancel: false
					});
				}
			});
		},
		methods: {
			buyScore(id,jifen,money){
				
				this.$emit('buyScore',id,jifen,money);
			},
			toMember(){
				uni.navigateTo({
					url:'/pages/user/membership'
				})
			},
			goback(){
				this.$emit('goback');
			},
			async showBuy(){
				this.$refs.wanlJifenPopup.open();
				await uni.request({
					url: '/wanlshop/user/refresh',
					method:'POST',
					success: res => {
						this.$store.commit('statistics/edit', res.data.statistics);
						this.$store.commit('user/setUserInfo', res.data.userinfo);
						this.myscore = res.data.userinfo.score;
					}
				});
			},
			async buy(){
				if (this.$store.state.user.isLogin) {
					var data = this.videoList[this.videoIndex];
					await uni.request({
						url: '/wanlshop/short/payShortChild',
						method: 'POST',
						data: {
							short_id: data.short.id,
							short_child_id: data.id
						},
						success: res => {
							
							uni.showToast({
							    title: res.msg,
							    icon: 'none'
							});
							//直接播放这集
							
							this.$refs.wanlJifenPopup.close();
							// this.videoList[this.videoIndex].is_lock = 0;
							var i = this.videoIndex;
							//这里先临时跳到第一集，不然没办法指定播
							this.clickVideo(0)
							this.shortChildId = data.id;
							this.loadData();
							// this.videoList[this.videoIndex].play = false;
							// this.videoList[this.videoIndex].play = true;
							// this.playRecord(this.videoIndex)
						},
						fail: res => {
							uni.showToast({
							    title: res.msg,
							    icon: 'none'
							});
							
						},
					});
				} else {
					uni.navigateTo({
						url: '/pages/user/auth/auth'
					})
				}
			},
			async getBuyList(){
				await uni.request({
					url: '/wanlshop/Recharge/packages',
					success: res => {
						this.buyList = res.data
						
					}
				});
			},
			 clickVideo(index){
				for (let item of this.videoList) {
					item.play = false
				}
				// console.log('clickVideo--end');
				// if(this.videoList[index].is_lock){
				// 	//必须登陆才能看
				// 	if (this.$store.state.user.isLogin) {
				// 		this.$refs.wanlJishuPopup.close();
				// 		this.$refs.wanlJifenPopup.open();
				// 	}else{
				// 		this.$wanlshop.to('/pages/user/auth/auth');
				// 	}
					
				// }else{}
				this.videoIndex = index;
				this.videoList[this.videoIndex].play = true
				this.playRecord(this.videoIndex)
				this.$refs.wanlJishuPopup.close();
				
				
			},
			async loadData(type){
				this.status = 'loading';
				if(type === 'update'){
					if (this.current_page >= this.last_page) {
						this.status = 'noMore';
						return false;
					} else {
						this.current_page += 1;
					}
				}
				
				await uni.request({
					url: '/wanlshop/short/shortChildList?id='+this.juid+'&page='+this.current_page+'&per_page=100',
					success: res => {
						this.total = res.data.total
						// this.videoList = this.videoList.concat(res.data.data);
						this.videoList = res.data.data;
						
						if(res.data.data.length > 0){
							this.$nextTick(() => {
								if(this.shortChildId != 0){
									//指定播第几集
									this.videoList.forEach((item,index)=>{
										if(item.id == this.shortChildId){
											this.videoInfo = item.short
											this.videoIndex = index;
											this.videoPlay(this.videoIndex);
											this.shortChildId = 0
										}
									})
								}else{
									//从第1集开始播
									this.videoInfo = res.data.data[0].short
									this.videoIndex = 0;
									this.videoPlay(this.videoIndex);
								}
							})
							// if(this.shortChildId != 0){
							// 	console.log(111);
							// 	//指定播第几集
							// 	this.videoList.forEach((item,index)=>{
							// 		if(item.id == this.shortChildId){
							// 			this.videoInfo = item.short
							// 			this.videoIndex = index;
							// 			this.videoPlay(this.videoIndex);
							// 			this.shortChildId = 0
							// 		}
							// 	})
								
							// }else{
							// 	console.log(222);
							// 	//从第1集开始播
							// 	this.videoInfo = res.data.data[0].short
							// 	this.videoIndex = 0;
							// 	this.videoPlay(this.videoIndex);
							// }
							
							
						}else{
							uni.showToast({
								title: '系统还未上传任何视频！',
								icon: 'none'
							});
						}
						
						this.current_page = res.data.current_page;  //当前页码
						this.last_page = res.data.last_page;  //总页码
						// 判断是否还有数据
						if(res.data.current_page === res.data.last_page || res.data.total === 0){
							this.status = 'noMore';
						}else{
							this.status = 'more';
						}
					}
				});
			},
			async handleFollow(shop = null,event) {
				event.stopPropagation();
				if (this.$store.state.user.isLogin) {
					var data = this.videoList[this.videoIndex];
					await uni.request({
						url: '/wanlshop/find/user/setFindUser',
						method: 'POST',
						data: {
							id: data.user_no,
							type: 'follow'
						},
						success: res => {
							if(shop){
								let concern = this.$store.state.statistics.dynamic.concern;
								if(res.data.data === 0){
									concern -= 1;
								}else{
									concern += 1;
								}
								this.$store.commit('statistics/dynamic', {
									concern: concern,
								});
							}
							data.isFollow = res.data.data;
						}
					});
				} else {
					uni.navigateTo({
						url: '/pages/user/auth/auth'
					})
				}
				
			},
			async handleLike(event) {
				event.stopPropagation();
				if (this.$store.state.user.isLogin) {
					let data = this.videoList[this.videoIndex];
					// 加载网络
					await uni.request({
						url: '/wanlshop/short/addFavorite',
						method: 'POST',
						data: {
							short_id: data.short.id,
							short_child_id: data.video.id,
							num:this.videoIndex+1
						},
						success: res => {
							console.log(res);
							// this.videoList.forEach((item,index)=>{
							// 	this.videoList[index].count = res.data.count
							// 	this.videoList[index].is_favorite = res.data.is_favorite;
							// })
							if(res.data.is_favorite == 0){
								data.count -= 1;
							}else{
								data.count += 1;
							}
							data.is_favorite = res.data.is_favorite;
						}
					});
				} else {
					uni.navigateTo({
						url: '/pages/user/auth/auth'
					})
				}
			},
			async handleComment(event){
				event.stopPropagation();
				if (this.$store.state.user.isLogin) {
					let data = this.videoList[this.videoIndex];
					// 加载网络
					await uni.request({
						url: '/wanlshop/find/comments/getList',
						data: {
							id: data.id
						},
						success: res => {
							this.commentData = res.data;
							this.commentData.find_id = data.id;
							data.comments = res.data.count;
							this.$refs.wanlCommentPopup.open();
						}
					});
				} else {
					uni.navigateTo({
						url: '/pages/user/auth/auth'
					})
				}
			},
			handleComplete(e){
				if(e.type === 'add'){
					this.handleCommentClose();
				}
				this.commentData.count = e.count;
				this.videoList[this.videoIndex].comments = e.count;
			},
			handleUser(user_no, event){
				event.stopPropagation();
				uni.navigateTo({
					url: `/pages/apps/find/user?id=${user_no}`
				})
			},
			handleShop(id){
				event.stopPropagation();
				uni.navigateTo({
					url: `/pages/shop/index?id=${id}`
				})
			},
			handleGoods(id){
				event.stopPropagation();
				uni.navigateTo({
					url: `/pages/product/goods?id=${id}`
				})
			},
			handleCommentClose(){
				this.$refs.wanlCommentPopup.close();
			},
			handleShare(event){
				event.stopPropagation();
				this.$refs.wanlSharePopup.open();
			},
			handleJishu(event){
				event.stopPropagation();
				this.$refs.wanlJishuPopup.open();
			},
			handleOnShare(e){
				let find = this.videoList[this.videoIndex];
				let href = `${this.$store.state.common.appConfig.domain}/pages/apps/find/details/video?id=${find.id}`;
				let shareType = 0; //shareType 分享类型 0.图文 1.纯文字 2.纯图片 5.小程序
				let shareText = this.formatHtml(this.videoInfo.name);
				let image = this.videoInfo.cover_url;
				let shareTitle = '短视频分享';
				if (e.id == 'poster') {
					// 海报维护中
				} else if (e.id == 'link') {
					this.copy(href);
				} else {
					// 开始分享
					let shareOPtions = {
						provider: e.id,
						scene: e.type && e.type === 'WXSenceTimeline' ? 'WXSenceTimeline' : 'WXSceneSession', //WXSceneSession”分享到聊天界面，“WXSenceTimeline”分享到朋友圈，“WXSceneFavorite”分享到微信收藏     
						type: shareType,
						success: (e) => {
							uni.showModal({
								content: '已分享',
								showCancel:false
							})
						},
						fail: (e) => {
							uni.showModal({
								content: e.errMsg,
								showCancel:false
							})
						}
					}
					switch (shareType){
						case 0:
							shareOPtions.summary = shareText;
							shareOPtions.imageUrl = image;
							shareOPtions.title = shareTitle;
							shareOPtions.href = href;
							break;
						case 1:
							shareOPtions.summary = shareText;
							break;
						case 2:
							shareOPtions.imageUrl = image;
							break;
						case 5:
							var pages = getCurrentPages();  
							var page = (pages[pages.length - 1]).route;  
							shareOPtions.imageUrl = image;
							shareOPtions.title = shareTitle;
							shareOPtions.miniProgram = {
								id: this.$store.state.common.appConfig.mp_weixin_id,
								path: page, //微信小程序ID
								webUrl: href,
								type:0
							};
							break;
						default:
							break;
					}
					// if(shareOPtions.type === 0 && plus.os.name === 'iOS'){//如果是图文分享，且是ios平台，则压缩图片 
					// 	shareOPtions.imageUrl = await this.compress();
					// }
					if(shareOPtions.type === 1 && shareOPtions.provider === 'qq'){//如果是分享文字到qq，则必须加上href和title
						shareOPtions.href = href;
						shareOPtions.title = shareTitle;
					}
					uni.share(shareOPtions);
				}
				this.handleShareClose();
			},
			handleShareClose(){
				this.$refs.wanlSharePopup.close();
			},
			handleTag(){
				console.log('点击标签')
			},
			// 点击视频事件
			handleClicked() {
			    if(timer){
			        clearTimeout(timer);
			    }
			    this.clickNum++
			    timer = setTimeout(() => {
			        if(this.clickNum >= 2){
						this.handleLike()
			        }else{
						var temp = this.videoInfo;
						this.videoInfo = null;
						this.videoInfo = temp;
						this.videoList[this.videoIndex].play = !this.videoList[this.videoIndex].play;
						console.log('handleClicked'+this.videoList[this.videoIndex].play);
						
					}
			        this.clickNum = 0
			    }, 300)
			},
			// 播放当前视频
			videoPlay(index) {
				console.log('videoPlay');
				this.videoList[index].play = !this.videoList[index].play;
				this.playRecord(index);
			},
			async playRecord(index){
				//调用接口，说明看到第几集
				console.log(this.videoList[index]);
				await uni.request({
					url: '/wanlshop/short/watch',
					method:"POST",
					data: {
						short_id: this.videoList[index].short.id,
						short_child_id: this.videoList[index].id,
						num: this.videoList[index].num
					},
					success: res => {
						
					}
				});
			},
			handleVideoPlay(){
				console.log('handleVideoPlay');
				if(this.videoList.length > 0)
				// this.$nextTick(() => {})
					this.videoList[this.videoIndex].play = true;
				this.playRecord(this.videoIndex);
			},
			handleVideoPause(){
				for (let item of this.videoList) {
					item.play = false
				}
			},
			// 时间打标
			pauseVideo(val) {
				// 1.0.9临时
				// if (typeof this.videoList[this.oldVideoIndex].initialTime != 'undefined') {
				// 	this.videoList[this.oldVideoIndex].initialTime = val
				// }
			},
			animationFinish(e) {
				//#ifdef APP-PLUS
				this.changeCurrent(e)
				//#endif
			},
			changeCurrent(e) {
				console.log('changeCurrent');
				this.videoIndex = e.detail.current;
				this.clickVideo(this.videoIndex);
				
				// this.$nextTick(() => {})
				// for (let item of this.videoList) {
				// 	item.play = false
				// }
				// this.videoList[this.videoIndex].play = true
				// this.playRecord(this.videoIndex)
				
			},
			// 格式化html
			formatHtml(content){
				return (content.replace(/<\/?.+?>/g,"").replace(/ /g,""));
			},
			copy(content){
				// 复制内容，必须字符串，数字需要转换为字符串
				content = typeof content === 'string' ? content : content.toString();
				//#ifndef H5
				uni.setClipboardData({
					data: content,
					success: function() {
						uni.showToast({
						    title: `复制成功 ${content}`,
						    icon: 'none'
						});
					},
					fail:function(){
						uni.showToast({
						    title: `复制失败`,
						    icon: 'none'
						});
					}
				});
				//#endif
				// #ifdef H5
				if (!document.queryCommandSupported('copy')) { //为了兼容有些浏览器 queryCommandSupported 的判断
					msg('浏览器不支持');
				}
				let textarea = document.createElement("textarea")
				textarea.value = content
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选择对象
				textarea.setSelectionRange(0, content.length) //核心
				let result = document.execCommand("copy") // 执行浏览器复制命令
				if(result){
					uni.showToast({
					    title: `复制成功 ${content}`,
					    icon: 'none'
					});
				}else{
					uni.showToast({
					    title: `复制失败`,
					    icon: 'none'
					});
				}	
				textarea.remove()
				// #endif
			},
			oss(url, w = 120, h = 120, modenum = 2, type = '', format = 'jpg', resize = 'resize', multiple = 3){
				let ossStc = this.$store.state.common.appUrl.oss;
				let image = '';
				let mode = ["m_lfit","m_mfit","m_fill","m_fixed"];
				// 图像，自适应方向：1，渐进显示：1，转换格式：jpg，图片质量：q_90，图片锐化：50，浓缩图
				let rule = ["?x-oss-process=image", "auto-orient,1", "interlace,1", "format,jpg", "quality,q_90", "sharpen,50", "resize,m_fixed,w_120,h_120"];
				// 转换格式
				if (format == 'png') {
					rule[3] = ["format", "png"].join(",");
				}
				// 判断是否有高度
				if (w == 0) {
					rule[6] = [resize, mode[modenum], `h_${h * multiple}`].join(",");
				}else if(h == 0){
					rule[6] = [resize, mode[modenum], `w_${w * multiple}`].join(",");
				}else{
					rule[6] = [resize, mode[modenum], `w_${w * multiple}`, `h_${h * multiple}`].join(",");
				}
				//当地址不存在
				if (url) {
					if ((/^data:image\//.test(url))) {
						image = url;
					}else if((/^(http|https):\/\/.+/.test(url))){
						rule.pop();
						image = url + rule.join("/");
					}else{
						image = ossStc + url + rule.join("/");
					}
				}else{
					if (type == 'transparent') {
						
					}else if(type == 'avatar'){
						image = ossStc + '/common/mine_def_touxiang_3x.png';
					}else{
						image = ossStc + '/common/img_default3x.png';
					}
				}
				return image;
			}
		},
		watch: {
			// 加载新的视频
			videoIndex(newVal, oldVal) {
				if (this.videoList.length - this.videoIndex - 1 <= this.preload) {
					this.loadData('update')
				}
				this.oldVideoIndex = oldVal
			}
		}
	};
</script>

<style scoped>
	@import '@/static/style/wanlnvue.css';
	.goBack{
		width: 60rpx;
		height: 60rpx;
		/* 修复返回按钮 */
		position: fixed;
		left: 40rpx;
		top: 80rpx;
		z-index: 99;
		color: white;
		font-size: 40rpx;
	}
	.goBackimg{
		width: 40rpx;
		height: 40rpx;
	}
	
	.jishu{
		width: 750rpx;
		height: 1234rpx;
		background-color: #fff;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		padding: 32rpx;
		box-sizing: border-box;
	}
	
	.jishubox{
		height: 1100rpx;
	}
	.scorllBox {
		display: flex;
		align-items: center !important;
		/* justify-content: space-around !important; */
		flex-direction: row !important;
		flex-wrap: wrap;
	}
	
	.jishuitem{
		width: 216rpx;
		height: 280rpx;
		border-radius: 16rpx;
		position: relative;
		/* float: left;*/
		margin-right: 10rpx; 
		margin-bottom: 15rpx;
	}		
		
	.jishuitemimage{
		width: 216rpx;
		height: 280rpx;
		position: absolute;
		top: 0;
		border-radius: 16rpx;
	}
	
	.jishuitemlock{
		width: 216rpx;
		height: 280rpx;
		position: absolute;
		bottom: 0;
		background: rgba(0,0,0,0.41);
		border-radius: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.jishuitemlockimg{
		width: 48rpx;
		height: 48rpx;
		/* background-image: url(https://dcdn.cxycoder.com/img/movielock.png);
		background-repeat: no-repeat;
		background-size: 100% auto; */
	}
	
	.jishuitemnum{
		position: absolute;
		bottom: 0;
		width: 216rpx;
		height: 46rpx;
		background: rgba(0,0,0,0.75);
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom-left-radius: 16rpx;
		border-bottom-right-radius: 16rpx;
	}
			
				
				
				
			
			/* .item:nth-child(3n){
				margin-right: 0rpx;
			} */
		
		
	
	.buy{
		width: 750rpx;
		background: white;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		padding: 32rpx;
		box-sizing: border-box;
		
	}
	.buybtn{
		width: 680rpx;
		height: 80rpx;
		margin-top: 20rpx;
		align-items: center;
		border-radius: 16rpx;
		background-color: #0499FD;
		/* #ifndef APP-NVUE */
		background-image: linear-gradient( 90deg, #6FD4FF 0%, #36AEFF 53%, #0499FD 100%);
		/* #endif */
	}
	.buybtntext{
		color: white;
		font-size: 30rpx;
		font-weight: bold;
	}
	.buytips{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
	}
	.buytipsleft{
		color: #787878;
		font-size: 28rpx;
	}
	.buytipsright{
		color: #787878;
		font-size: 28rpx;
	}
	.buytipslefttext{
		font-weight: bold;
		color: #0499FD;
	}
	.buytipsrighttext{
		font-weight: bold;
		color: #A66F08;
	}
	.tishi{
		font-size: 24rpx;
		color: #636363;
	}
	.tishi2{
		font-weight: 400;
		font-size: 24rpx;
		color: #F05158;
		margin-top: 10rpx;
	}
	.chongzhi{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 10rpx 0rpx;
	}
	.chongzhiitem{
		width: 330rpx;
		height: 174rpx;
		/* background: url(https://dcdn.cxycoder.com/img/chongzhijifen.png);
		background-repeat: no-repeat;
		background-size: 100% auto; */
		position: relative;
		margin-top: 20rpx;
	}
	.chongzhiitemimg{
		width: 330rpx;
		height: 174rpx;
	}
	.chongzhiitemTips{
		position: absolute;
		right: 0rpx;
		height: 36rpx;
		background: #F05158;
		/* #ifndef APP-NVUE */
		background-color: linear-gradient( 90deg, #FF9573 0%, #F05158 100%);
		/* #endif */
		padding: 10rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}
	.chongzhiitemTipstext{
		font-size: 24rpx;
		color: white;
	}
	.chongzhibox{
		position: absolute;
		left: 50rpx;
		top: 30rpx;
	}
	.chongzhiprice{
		font-weight: 600;
		font-size: 52rpx;
		color: #FB4848;
	}
	.unit{
		font-size: 30rpx;
		color: #FB4848;
	}
	
	.chongzhipricetext{
		font-size: 32rpx;
	}
	.chongzhipoint{
		font-size: 24rpx;
		color: #0499FD;
	}
	.huiyuan{
		margin-top: 10rpx;
		width: 330rpx;
		height: 174rpx;
		background: url(https://dcdn.cxycoder.com/img/chongzhihuiyuan.png);
		background-repeat: no-repeat;
		background-size: 100% auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
	}
	.huiyuantitle{
		font-weight: 600;
		font-size: 32rpx;
		color: #A66F08;
	}
	.huiyuanpoint{
		font-size: 24rpx;
		color: #A66F08;
	}
	
	.share{
		border-top-left-radius: 26rpx;
		border-top-right-radius: 26rpx;
	}
	.share-scroll-view{
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}
	.share-scroll-view-item{
		/* #ifndef APP-PLUS */
		display: inline-flex;
		/* #endif */
		margin-right: 36rpx;
	}
	.share-scroll-view-item-button{
		background-color: rgba(0, 0, 0, 0);
		border: 0;
		padding: 0;
		flex-direction: column;
	}
	.share-scroll-view-item-button-icon{
		width: 100rpx;
		height: 100rpx;
		border-radius: 5000rpx;
	}
	/* #ifndef APP-PLUS */
	button:after{
		border: 0;
	}
	/* #endif */
	
	.video{
		background-color: #000000;
	}
	
	.left-describe{
		/* #ifndef APP-PLUS */
		display: inline;
		/* #endif */
	}
	.main-right{
		width: 98rpx;
	}
		.main-right-user{
			height: 116rpx;
			width: 98rpx;
		}
			.main-right-user-follow{
				width: 40rpx;
				height: 40rpx;
				bottom: 0;
				z-index: 999;
			}
		.main-right-image{
			width: 98rpx;
			height: 98rpx;
		}
			.main-right-img{
				width: 90rpx;
				height: 90rpx;
			}
	.goods {
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
		height: 174rpx;
	}
	.goods-item {
		/* #ifndef APP-PLUS */
		display: inline-block;
		/* #endif */
		background-color: rgba(255,255,255,.9);
		border-radius: 18rpx;
		margin-left: 14rpx;
		padding: 14rpx;
		height: 154rpx;
	}
		.goods-item-img{
			height: 126rpx;
			width: 126rpx;
			margin-right: 14rpx;
			border-radius: 4rpx;
		}
	.comment{
		background-color: rgba(10,10,10,0.9);
		border-top: 2rpx solid rgba(255,255,255,0.1);
		border-top-left-radius: 26rpx;
		border-top-right-radius: 26rpx;
	}
	
</style>
